<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Dynamic Fetch Example</title>
</head>

<body>
    <h1>Send Custom Data to Backend</h1>

    <label for="secret">Secret:</label>
    <input type="text" id="secret" name="secret" value="my-secret"><br><br>

    <label for="key">Key:</label>
    <input type="text" id="key" name="key" value="jwt-auth"><br><br>

    <label for="expiration">Expiration (seconds):</label>
    <input type="number" id="expiration" name="expiration" value="86400"><br><br>

    <button id="sendDataBtn">Send Data</button>

    <script type="text/javascript">
        document.getElementById('sendDataBtn').addEventListener('click', function () {
            const secret = document.getElementById('secret').value;
            const key = document.getElementById('key').value;
            const expiration = document.getElementById('expiration').value;

            const data = {
                "secret": secret,
                "key": key,
                "expiration": parseInt(expiration, 10) // 确保 expiration 是数字类型
            };

            fetch('https://your-backend-endpoint.com/api', { // 替换为你的实际后端API地址
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
                .then(response => response.json())
                .then(data => {
                    console.log('Success:', data);
                    alert('Data sent successfully!');
                })
                .catch((error) => {
                    console.error('Error:', error);
                    alert('There was an error sending the data.');
                });
        });
    </script>
</body>

</html>
